<template>
    <div class="audit-project-task-change-view">

      <el-form :model="projects" class="demo-form-inline" label-width="120px" size="medium" label-position="left">

        <el-row>
          <el-col :span="8">
            <el-form-item label="项目编号：">
              <div>{{projects.project_no ? projects.project_no : "无"}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目名称：">
              <div>{{projects.project_name ? projects.project_name : "无"}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目负责人：">
              <div>{{projects.project_person_in_charge ? projects.project_person_in_charge : "无"}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工期（天）：">
              <div>{{projects.duration}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划开始时间：">
              <div>{{projects.plan_start_time ? dateFormat1('yyyy-mm-dd',projects.plan_start_time) : "无"}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划结束时间：">
              <div>{{projects.plan_start_time ? dateFormat1('yyyy-mm-dd',projects.plan_end_time) : "无"}}</div>
            </el-form-item>
          </el-col>

        </el-row>

        <el-form-item label="变更原因：">
          <div>{{datas.reason}}</div>
        </el-form-item>

        <el-form-item label="备注：">
          <div>{{datas.description}}</div>
        </el-form-item>

        <el-form-item label="变更影响程度：">
          <div>{{datas.level}}</div>
        </el-form-item>

        <el-form-item label="变更影响描述：">
          <div>{{datas.change_describe}}</div>
        </el-form-item>

      </el-form>

      <el-table
        size="medium"
        :data="tableData"
        border
        row-key="id"
        @row-click="tableRowClick"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        style="width: 100%">
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          header-align="center"
          label="里程碑/任务名称">
          <template slot-scope="scope">

            <span v-if="(!scope.row.children || !scope.row.children.length) && scope.row.level == 1" style="padding-left: 25px">  </span>
            <span>{{scope.row.task_name}}</span>

          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="duration"
          label="工期（天）">
        </el-table-column>
        <el-table-column
          align="center"
          prop="foreground_task_name"
          label="前置任务">
        </el-table-column>
        <el-table-column
          align="center"
          prop="person"
          label="负责人">
          <template slot-scope="scope">
            <div v-if="scope.row.person_in_charge && scope.row.person_in_charge.member_id">
              {{scope.row.person_in_charge.member_name}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="任务状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">未启动</span>
            <span v-if="scope.row.status == 1">进行中</span>
            <span v-if="scope.row.status == 2">暂停</span>
            <!--        <span v-if="datas.status == 3">延期</span>-->
            <span v-if="scope.row.status == 4">待验收</span>
            <span v-if="scope.row.status == 5">验收不通过</span>
            <span v-if="scope.row.status == 6">已完成</span>
            <span v-if="scope.row.delay_day == 3">延期({{scope.row.delay_day}}天)</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="startDate"
          label="计划开始日期">
          <template slot-scope="scope">

            <span>{{scope.row.start_date ? dateFormat1('yyyy-mm-dd',scope.row.start_date) : ''}}</span>

          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="endDate"
          label="计划结束日期">
          <template slot-scope="scope">

            <span>{{scope.row.end_date ? dateFormat1('yyyy-mm-dd',scope.row.end_date) : ''}}</span>

          </template>
        </el-table-column>


        <el-table-column
          align="center"
          prop="days"
          label="参与人"
          width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.task_member && scope.row.task_member.length > 0">
              <el-popover
                placement="top-start"
                width="100"
                trigger="hover">
                <div>
                  <div v-for="item in scope.row.task_member" style="padding-bottom: 5px">
                    <i class="el-icon-user">{{  item.member_name}}</i>
                  </div>
                </div>
                <i slot="reference" class="el-icon-user">{{scope.row.task_member.length}}</i>
              </el-popover>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="类型">
          <template slot-scope="scope">

            <span v-if="scope.row.type == 1">未改变</span>
            <span v-else-if="scope.row.type == 2" style="color: red">改变</span>
            <span v-else-if="scope.row.type == 3" style="color: green">新增</span>

          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        title="详情"
        :visible.sync="dialogVisible"
        width="900px"
        :before-close="handleClose">

        <project-task-detail-view :before="before" :after="after"></project-task-detail-view>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>
  import projectTaskDetailView from "./projectTaskDetailView";
    export default {
        name: "projectTaskChangeView",
        components:{projectTaskDetailView},
        props:{
            datas:{
                type:Object,
                default:function () {
                    return{
                        tasks_before:{},
                        tasks_after:{}
                    }
                }
            },
            projects:{
                type:Object,
                default:{}
            }
        },
        watch:{
            datas:{
                handler:function (newVal,oldVal) {
                    if (newVal){
                        this.dealData();
                    }
                },
                deep:true,
                immediate:true
            }
        },
        data:function () {
            return{
                dialogVisible:false,
                tableData:[],
                beforeData:[],
                after:{},
                before:{},
                project:{}
            }
        },
        methods:{
            handleClose:function(){
                this.dialogVisible = false;
            },
            tableRowClick:function(row, column, event){
                this.after = row;
                if (this.findData(row.id)){
                    this.before = this.findData(row.id);
                }else {
                    this.before = {}
                }

                this.dialogVisible = true;
            },
            dealData:function () {
                this.tableData = this.datas.tasks_after ? this.datas.tasks_after :[]
                this.beforeData = this.datas.tasks_before ? this.datas.tasks_before :[]
                this.checkDataType(this.tableData)
            },
            checkDataType:function(list){
                for (let i = 0; i < list.length; i++){
                    let data = list[i]
                    let old = this.findData(data.id);
                    if (!old){
                        data.type = 3;    //新增
                    }else {

                        if (!this.checkChange(data,old)){
                            data.type = 1;    //未改变
                        }else {
                            data.type = 2;    //改变
                        }
                    }

                    if (data.children && data.children.length){
                        this.checkDataType(data.children)
                    }
                }
            },
            checkChange(data,old){

                if (data.duration != old.duration){
                    return true;
                }

                if (data.start_date != old.start_date){
                    return true;
                }

                if (data.end_date != old.end_date){
                    return true;
                }

                if (data.person_in_charge && old.person_in_charge){
                    if (data.person_in_charge.member_id != old.person_in_charge.member_id){
                        return true;
                    }
                }

                if ((data.task_member_id && data.task_member_id.length) && (old.task_member_id && old.task_member_id.length)){
                    if (data.task_member_id.length > old.task_member_id.length || data.task_member_id.length < old.task_member_id.length){
                        data.isChangeMember = true
                        return true
                    }else {
                        for (let i = 0; i < old.task_member_id.length; i++){
                            let index = data.task_member_id.findIndex(a=>a==old.task_member_id[i])
                            if (index == -1){
                                data.isChangeMember = true
                                return true
                            }
                        }
                    }

                }else {
                    data.isChangeMember = true
                    return true
                }

                if (data.files && data.files.length){
                    let num = old.files ? old.files.length : 0;
                    if (data.files.length != num){
                        data.newFiles = []
                        for (let a = num; a < data.files.length; a ++){
                            data.newFiles.push(data.files[a])
                        }

                        return true
                    }
                }

                return false
            },
            // 查找任务数据
            findData:function(id){
                let arr = this.findDataArr(id,this.beforeData);

                let data = null
                if (arr.length == 1){
                    data = {...this.beforeData[arr[0]]}
                }else if (arr.length) {
                    let a = [...this.beforeData]
                    for (let i = 0; i < arr.length; i++){
                        if (i == arr.length-1){
                            data = {...a[arr[i]]};
                        }else{
                            a = a[arr[i]].children;
                        }
                    }
                }
                return data;
            },
            // 查找任务路径
            findDataArr:function(id,list){
                let arr = [];
                for (let i = 0; i < list.length; i++){
                    if (list[i].id == id){
                        arr.push(i)
                        break
                    }else if (list[i].children && list[i].children.length > 0){
                        let a = this.findDataArr(id,list[i].children)
                        if (a.length > 0){
                            arr.push(i);
                            arr = arr.concat(a);
                            break;
                        }
                    }
                }

                return arr;
            },
        }
    }
</script>

<style scoped>

</style>
